[POS Settings] Add two-panel settings view #16021

iamgabrielma · 2025-08-21T09:24:31Z

Description

This PR adds a functional two-side navigation for POS settings. UI is not final, just temporary to build the settings scaffolding and navigation. UI details will be handled separately.

Settings is full screen. Presented via ... > Settings
Left side contains the parent navigation: Store, Hardware (top), and Help (pinned to the bottom).
Right side contains the detail navigation view. Further navigation will be encapsulated to the right-side. At the moment only Hardware has been added with barcode scanner, and card readers sub-navigation. The other views will present just a placeholder.
Can be dismissed to go back to POS dashboard.

Testing information

~~Switch pointOfSaleSettingsi1 to true~~
Navigate to POS, tap on the floating ..., tap on Settings
Observe the view is presented full-screen
Can be dismissed by tapping "Done"
Tapping any of the right side items displays a custom view to the left
Tap Hardware, observe there are two more items to navigate to: Card readers and barcode scanner
Observe how you can navigate to those as well.

Screenshots

Screen.Recording.2025-08-22.at.16.05.17.mov

I have considered if this change warrants user-facing release notes and have added them to RELEASE-NOTES.txt if necessary.

It doesn’t seem to be straight-forward to push one of the elements of a List down to the bottom, while keeping the rest at the top, so “Help” has to be outside the List.

We also remove the navigation stack from the settings view as a parent, otherwise is part of the nav stack, and presenting any other destination would cover it full-screen. We only make the details right-side part of the nav stack instead.

Dismissal does not show anymore in the parent settings view since we don’t us a navigation stack, and we cannot use a navigation stack otherwise the destinations will be presented full-screen, so we move dismissal to each subview.

dangermattic · 2025-08-21T09:25:10Z

	1 Warning
⚠️	This PR is larger than 300 lines of changes. Please consider splitting it into smaller PRs for easier and faster reviews.

Generated by 🚫 Danger

iamgabrielma · 2025-08-21T09:27:45Z

WooCommerce/Classes/POS/Presentation/Settings/PointOfSaleSettingsView.swift

+                        }
+                    }
+                }
+                .safeAreaInset(edge: .bottom) {


I wasn't able to pin the Help section to the bottom of the view while this is part of a List. This approach worked, but I'm not fully convinced is the best way to move forward.

We do not necessarily need a list here and perhaps creating just a reusable "card" would work fine for the 3 items. If we do, this can be iterated on a separate PR. Thoughts?

Agreed, if a list makes it harder, let's just make our own cards.

Also, this might move the help button above an on-screen keyboard, which would be a bit strange. It's likely that we'll end up presenting one in settings eventually.

iamgabrielma · 2025-08-21T09:30:24Z

WooCommerce/Classes/POS/Presentation/Settings/PointOfSaleSettingsHelpDetailView.swift

+                    .foregroundStyle(.secondary)
+            }
+            .padding()
+            .toolbar {


Here's a NavigationStack gotcha: I had to add the .toolbar for the dismiss action to all destination views, rather than once to the parent Settings view, if we do, then these destinations will be presented full-screen as part of the stack, rather than encapsulated to the right-side only.

An alternative that seems to work is to dismiss the PointOfSaleSettingsView through a viewmodifier attached to the parent view instead, so we could remove the .toolbar approach from the subviews. For testing I used .posModalCloseButton(action: { dismiss() }) since already exists, and seemed to work fine. no longer needed since using a POSPageHeaderView: 86fe351

wpmobilebot · 2025-08-21T09:33:39Z

📲 You can test the changes from this Pull Request in WooCommerce iOS Prototype by scanning the QR code below to install the corresponding build.

	App Name	WooCommerce iOS Prototype
	Build Number	`pr16021-78b3836`
	Version	`23.1`
	Bundle ID	`com.automattic.alpha.woocommerce`
	Commit	`78b3836`
	Installation URL	1iac8mtkgishg

Automatticians: You can use our internal self-serve MC tool to give yourself access to those builds if needed.

iamgabrielma · 2025-08-22T08:55:28Z

WooCommerce/Classes/POS/Presentation/Settings/PointOfSaleSettingsView.swift

+                Text(Localization.navigationTitle)
+                    .font(.posHeadingRegular)
+                    .padding(.horizontal, POSPadding.medium)
+                    .padding(.top, POSPadding.medium)


Povilas shared his experiments with historic orders view in slack and had a good suggestion for when we update the UI: This bit can be updated with a POSPageHeaderView across the top of the parent view

Updated on 86fe351

joshheald

Some suggestions inline.

Works as described, fine to merge behind the feature flag.

Did you try using split views? My concern with the HStack approach is that it can be harder to manage at smaller screen sizes when we want to collapse it. With the coming iOS 26 having resizable windows, it might be best to take that pain up front and get it working with a split view instead of an HStack...

joshheald · 2025-08-26T09:59:12Z

WooCommerce/Classes/POS/Presentation/Settings/PointOfSaleSettingsView.swift

+        POSPageHeaderView(
+            title: Localization.navigationTitle,
+            trailingContent: {
+                Button(action: { dismiss() }) {
+                    Text(Image(systemName: "xmark"))
+                        .font(.posButtonSymbolLarge)
+                }
+                .foregroundColor(.posOnSurface)
+            })


It would be good to have this view handle back navigation for child views – the in-line navigation bar is a bit rough.

Yes, in the first draft of designs that we've just been provided with, the Settings do not seem to have any header, so we may get rid of this bit entirely and leave navigation to the child/side view entirely. I'll iterate on this shortly 👍

joshheald · 2025-08-26T10:02:59Z

WooCommerce/Classes/POS/Presentation/Settings/PointOfSaleSettingsView.swift

+                        }
+                    }
+                }
+                .safeAreaInset(edge: .bottom) {


Agreed, if a list makes it harder, let's just make our own cards.

Also, this might move the help button above an on-screen keyboard, which would be a bit strange. It's likely that we'll end up presenting one in settings eventually.

joshheald · 2025-08-26T10:06:52Z

WooCommerce/Classes/POS/Presentation/Settings/PointOfSaleSettingsView.swift

+                    .background(
+                        RoundedRectangle(cornerRadius: POSCornerRadiusStyle.large.value, style: .continuous)
+                            .fill(selection == .help ? Color.accentColor : Color.clear)
+                    )


The selected version looks pretty odd, being purple while the other selected items go grey.

Having rounded corners doesn't work well with the padding we have here either – which is closer to the screen edges because it's outside the list, but if we keep it this way then square corners would make more sense.

I know UI's not final so no need to fix here, but thought I'd mention it.

joshheald · 2025-08-26T10:13:48Z

WooCommerce/Classes/POS/Presentation/Settings/PointOfSaleSettingsView.swift

+}
+
+private extension PointOfSaleSettingsView {
+    enum SidebarNavigation: String, CaseIterable, Identifiable {


Might be nicer to define a protocol for settings items instead, then each can be separately defined closer to their content? Not sure about this, just something to consider.

joshheald · 2025-08-26T10:15:34Z

WooCommerce/Classes/POS/Presentation/Settings/PointOfSaleSettingsView.swift

+extension PointOfSaleSettingsView {
+    enum HardwareDestination: Identifiable, CaseIterable {
+        case cardReaders
+        case scanners
+
+        var id: Self { self }
+
+        var title: String {
+            switch self {
+            case .cardReaders:
+                return Localization.hardwareNavigationCardReaderTitle
+            case .scanners:
+                return Localization.hardwareNavigationBarcodeTitle
+            }
+        }
+
+        var subtitle: String {
+            switch self {
+            case .cardReaders:
+                return Localization.hardwareNavigationCardReaderSubtitle
+            case .scanners:
+                return Localization.hardwareNavigationBarcodeSubtitle
+            }
+        }
+
+        var icon: String {
+            switch self {
+            case .cardReaders:
+                return "creditcard"
+            case .scanners:
+                return "qrcode.viewfinder"
+            }
+        }
+    }
+}


It feels like overreach for this to be defined in the settings view. Surely this would be better in PointOfSaleSettingsHardwareDetailView?

True that, I'll address this one along #16038 , as PointOfSaleSettingsView.HardwareDestination changes 👍

joshheald · 2025-08-26T10:21:00Z

WooCommerce/Classes/POS/Presentation/Settings/PointOfSaleSettingsView.swift

+        HStack(spacing: POSSpacing.none) {
+            VStack(alignment: .leading, spacing: POSSpacing.none) {
+                List(selection: $selection) {


Consider breaking these up into subviews... aim for something clearer at the top level like:

var body: some View { POSPageHeaderView( ... ) HStack { PointOfSaleSettingsList() PointOfSaleSettingsDetail() } }

You'll need to pass some bindings around but it'll be both easier to read/debug in future, and should perform better (not that there's a performance issue!)

joshheald · 2025-08-26T10:21:43Z

WooCommerce/Classes/POS/Presentation/Settings/PointOfSaleSettingsView.swift

+                }
+                .foregroundColor(.posOnSurface)
+            })
+        HStack(spacing: POSSpacing.none) {


I don't think this should be 50/50 split...

Is definitely not 😂 , already addressed on #16038

iamgabrielma · 2025-08-28T01:19:04Z

Sorry I missed this comment!

Did you try using split views? My concern with the HStack approach is that it can be harder to manage at smaller screen sizes when we want to collapse it. With the coming iOS 26 having resizable windows, it might be best to take that pain up front and get it working with a split view instead of an HStack...

Sort of, it's useable with a split view but it's not the best:

Simulator Screenshot - iPad mini (A17 Pro) - US store - 2025-08-28 at 08 15 17

In theory that's an unsupported width, but we do show the floating menu and merchants can navigate through the rest of options, my plan is to use a similar approach of what POS Orders is doing and to show the side menu only as full screen, then navigate to the details view as full screen.

Simulator Screenshot - iPad mini (A17 Pro) - US store - 2025-08-28 at 08 15 06

I'm delaying it a bit to see if the design proposal for next steps changes the overall design too much or not (we should know it today/tomorrow).

iamgabrielma added 9 commits August 21, 2025 12:52

initial settings view distribution

770cc31

move elements to private extension. localization

f93dada

make subviews

239a39b

initial POS styles

a2cd1a4

attempt to push Help to bottom of the view

0d3d6bd

It doesn’t seem to be straight-forward to push one of the elements of a List down to the bottom, while keeping the rest at the top, so “Help” has to be outside the List.

wrap help section in button

ceb4e1b

nav stack for hardware details view

96edc8e

We also remove the navigation stack from the settings view as a parent, otherwise is part of the nav stack, and presenting any other destination would cover it full-screen. We only make the details right-side part of the nav stack instead.

extract subviews to files and cleanup

738ab10

move dismissal to subviews

f89e695

Dismissal does not show anymore in the parent settings view since we don’t us a navigation stack, and we cannot use a navigation stack otherwise the destinations will be presented full-screen, so we move dismissal to each subview.

iamgabrielma commented Aug 21, 2025

View reviewed changes

iamgabrielma added type: task An internally driven task. feature: app settings Related to settings accessed via the gear icon in the My Store section. feature: POS labels Aug 21, 2025

iamgabrielma added this to the 23.2 milestone Aug 21, 2025

iamgabrielma marked this pull request as ready for review August 21, 2025 09:31

iamgabrielma added 2 commits August 21, 2025 16:43

restore header navigationTitle

d818027

fix unused string

71ade8c

iamgabrielma requested a review from joshheald August 21, 2025 10:08

iamgabrielma commented Aug 22, 2025

View reviewed changes

iamgabrielma added 2 commits August 22, 2025 16:02

update header to use POSPageHeaderView

86fe351

enable flag for debug builds

cf5d8c7

iamgabrielma mentioned this pull request Aug 25, 2025

[POS Settings] Store settings section #16032

Closed

1 task

Merge branch 'trunk' into task/WOOMOB-1025-two-panel-settings-view

78b3836

joshheald self-assigned this Aug 26, 2025

joshheald approved these changes Aug 26, 2025

View reviewed changes

iamgabrielma merged commit f1267a9 into trunk Aug 27, 2025
14 checks passed

iamgabrielma deleted the task/WOOMOB-1025-two-panel-settings-view branch August 27, 2025 00:38

[POS Settings] Add two-panel settings view #16021

[POS Settings] Add two-panel settings view #16021

Uh oh!

Conversation

iamgabrielma commented Aug 21, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Testing information

Screenshots

Uh oh!

dangermattic commented Aug 21, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

iamgabrielma Aug 22, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

wpmobilebot commented Aug 21, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

joshheald left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

iamgabrielma commented Aug 28, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

iamgabrielma commented Aug 21, 2025 •

edited

Loading

dangermattic commented Aug 21, 2025 •

edited

Loading

iamgabrielma Aug 22, 2025 •

edited

Loading

wpmobilebot commented Aug 21, 2025 •

edited

Loading